<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件入门</title>
</head>
<body>


<div id="app">

    <counter></counter>
    <counter></counter>
    <counter></counter>


</div>
</body>
<script src="../../../lib/vue.global.js"></script>
<script>
    /**
     *   1.  能独立完成 一个或者一组相关的 视图内容
     *   2.  拥有相对对立的数据和行为
     *
     *
     *   什么是数据？
     *      变化
     * */

    const counter = { // 封装一个独立的Vue实例 ，通过注册和运行环境（父组件） 发生关联
        data() {
            return {
                num: 1
            }
        },
        template: ' <button @click="btn1Click">{{num}}</button>',
        methods: {
            btn1Click() {
                this.num++;
            }
        }
    }


    /**
     *   1.三个计数器
     *   2. 点击一次，数次+1
     *   3. 三个计数器之间不相互影响
     * */

    const createApp = Vue.createApp;

    createApp({

        data() {
            return { // 进行抽象，实现复用
            }
        }, components: {
            counter
        }
    }).mount('#app')


</script>
</html>